import styled from 'styled-components'
import cDeleteIcon from '@img/channel-delete.png'
import deleteIcon from '@img/channel-delete-box.png'
import setIcon from '@img/channel-set.png'

export const StyledWrap = styled.div`
	position: relative;
	margin-top: 27px;
	.btns {
		position: absolute;
		display: inline-block;
		top: -48px;
		right: 0;
	}
`

/* 图标相关 */
export const ChannelDeleteIcon = styled.div`
	background: url(${cDeleteIcon}) no-repeat scroll 0px 0px;
	width: 19px;
	height: 18px;
	margin-left: 2px;
	cursor: pointer;
`
export const DeleteIcon = styled.div`
	background: url(${deleteIcon}) no-repeat scroll 0px 0px;
	width: 19px;
	height: 18px;
	margin-left: 2px;
	cursor: pointer;
`
export const ChannelSetIcon = styled.div`
	background: url(${setIcon}) no-repeat scroll 0px 0px;
	width: 19px;
	height: 18px;
	margin-left: 2px;
	cursor: pointer;
`

/* 样式相关 */
export const StyledEditWrap = styled.div`
	position: relative;
	margin-top: 15px;
	.style-container {
		width: 900px;
		height: 588px;
		border: 1px dashed #bababa;
		margin: 45px auto;
	}
	.line {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #4e4e4e;
		margin-bottom: 30px;
		.label {
			width: 120px;
		}
		.style-label {
			margin-bottom: 30px;
		}
		.split {
			padding: 0 10px;
		}
		.choice {
			display: flex;
			align-items: center;
		}
		.prompt {
			margin-top: 15px;
			font-size: 14px;
			.prompt-line {
				margin-left: 20px;
			}
			.prompt-column {
				margin-left: 65px;
			}
		}
		.btn {
			margin-left: 25px;
		}
		.msg {
			position: absolute;
			left: 120px;
			top: 25px;
			color: #b6b6b6;
		}
	}
	.btn-wrap {
		position: absolute;
		top: -45px;
		right: 0;
		.save {
			margin-right: 4px;
		}
	}
`

export const StyledTVWallWrap = styled.div<{ width: number; height: number }>`
	position: relative;
	width: ${(props) => (props.width ? props.width + 'px' : '900px')};
	height: ${(props) => (props.width ? props.height + 'px' : '588px')};
	border: 1px dashed #bababa;
	margin: 45px auto;
	.box-container {
		background: #fff;
		border: 1px solid #ddd;
		color: #333;
		z-index: 0;
		&:hover {
			z-index: 9;
		}
		.box-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			font-size: 12px;
			.operates {
				display: none;
				position: absolute;
				right: 0;
				top: 0;
			}
			&:hover {
				.operates {
					display: flex;
				}
			}
			.box-article {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 5px;
			}
		}
	}
`

export const StyledChannelConfig = styled.div`
	padding-top: 20px;
	.line {
		display: flex;
		align-items: center;
		margin-top: 20px;
		margin-left: 33px;
		.label {
			width: 90px;
			color: #4e4e4e;
			font-size: 12px;
		}
	}
`
